<template>
    <fieldset>
        <legend>详情页</legend>
        <h1>{{current.title}}</h1>
        <!-- 图片这里要用动态指令参数 -->
        <img height="100" :src="current.pic" alt="">
        <h3>{{current.description}}</h3>
    </fieldset>
</template>

<script>
    let data = [
         {
            id:1,
            title:"香蕉",
            pic:"D:\HTML5\html\第一阶段\图片\乱七八糟\胖橘.jpg",
            description:"味甘，性寒，无毒。清热，润肠，解毒，养阴润燥，生津止渴。主治热病烦渴，便秘，痔血等病症。 [4]  香蕉既可生食，也可炖熟及做成香蕉干或者果脯等食用，还可制成香蕉泥（香蕉泥适合老人和儿童食用）。 [5]  此外，香蕉还可提取香蕉精，可用制作果汁、甜酒、果糖、饮料和牙膏香料等。"
        },
        {
            id:2,
            title:"黄瓜",
            pic:"D:\HTML5\html\第一阶段\图片\乱七八糟\星蝶公主2.jpg",
            description:"中国各地普遍栽培，且许多地区均有温室或塑料大棚栽培；现广泛种植于温带和热带地区。黄瓜为中国各地夏季主要菜蔬之一。茎藤药用，能消炎、祛痰、镇痉"
        },
        {
            id:3,
            title:"胡萝卜",
            pic:"D:\HTML5\html\第一阶段\图片\乱七八糟\学习.PNG",
            description:"胡萝卜素是维生素A的主要来源，而维生素A可以促进生长，防止细菌感染，以及具有保护表皮组织，保护呼吸道、消化道、泌尿系统等上皮细胞组织的功能与作用；胡萝卜含有一种檞皮素，常吃可增加冠状动脉血流量，促进肾上腺素合成，有降压、消炎之功效。"
        }
    ]
    export default {
       data(){
            return {
                details:data,
                current:{}
            }
       },
       props:["id"],    //解耦
       mounted(){
        //$router $route区别
            //$router是vue实例出来的最大的路由对象，$router包含了$route
            //$route是当前页面的路由对象
            console.log(this.$router);
            console.log(this.$route);

            //获取动态传递来的id
            let id = this.$route.params.id
            console.log(id);
            //给当前的数据赋值
            this.current = this.details.find(item=>item.id == id)
            console.log(this.current);

            //let id = this.id
            
       }
    }
</script>

<style>

</style>